<template>
  <el-dialog
    :title="flowTitle"
    :visible.sync="showDialog"
    width="80%"
    append-to-body
    @close="handleClose"
  >
    <el-tabs v-model="activeName">
      <el-tab-pane label="详情" name="info">
       <div class="form-button">
         <el-row>
           <template v-for="(btn, index) in btnArr">
             <el-button :key="index" v-show="!btn.hidden && (btn.funCode.indexOf('Add') === 0 || btn.funCode.indexOf('form_') === 0)" @click="btnClick(btn)" plain :type="btn.funCode === 'B005' ? 'danger' : 'primary'">{{ btn.funName  }}</el-button>
           </template>
         </el-row>
       </div>
        <component
          ref="component"
          :is="componentId"
          :formInfo="formInfo"
          @close="flowClose($event)"
        ></component>
      </el-tab-pane>
      <el-tab-pane v-if="pattern !== 'add' && formInfo.status !== '10'" label="流转记录" name="record">流转记录</el-tab-pane>
      <el-tab-pane v-if="pattern !== 'add' && formInfo.status !== '10'" label="流程跟踪" name="tail">流程跟踪</el-tab-pane>
    </el-tabs>

    <!-- 选择使用流程 -->
    <choose-flow
      v-if="showModule && moduleType === 'startFlow'"
      :showChooseFlow="showModule"
      @close="closeModule"
      @ok="chooseOk"
    ></choose-flow>


  </el-dialog>
</template>

<script>
import { startProcess } from "@/api/flow/workflow"
import ChooseFlow from "./ChooseFlow/index.vue";
export default {
  name: "index",
  components: { ChooseFlow },
  props: {
    flowTitle: {
      type: String,
      default: "title"
    },
    showDialog: {
      type: Boolean,
      default: false
    },
    baseUrl: {
      type: String,
      default: false
    },
    formInfo: {
      type: Object,
      default: false
    },
    type: {
      type: String,
      default: false
    },
    pattern: {
      type: String,
      default: false
    }
  },
  data() {
    return {
      activeName: 'info',
      componentId: '',
      btnArr: [],
      showModule: false,
      moduleType: '',
      flowForm: {}
    }
  },
  created() {
    this.flowForm = this.formInfo
    this.getFlowBtns()
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      if(this.type === 'list') {
        this.componentId = resolve => require.ensure([], () => resolve(require(`@/views/${this.baseUrl}`)))
      }
    },
    getFlowBtns() {
      this.btnArr = []
      // 列表添加按钮
      if (this.type === 'list') {
        this.btnArr.push({
          funCode: 'form_saveForm',
          funName: '保存'
        })
        this.btnArr.push({
          funCode: 'form_return',
          funName: '返回'
        })
      }
      // 判断是否是新增模式
      if (this.pattern !== 'add') {
        this.btnArr.push({
          funCode: 'form_startFlow',
          funName: '启动流程'
        })
      }
    },
    handleClose() {
      this.$emit("close");
    },
    flowClose(id) {
      this.$emit('closeFlow', id)
    },
    saveForm() {
      this.$refs.component.submitForm()
    },
    btnClick(btn) {
      if (btn.funCode === 'form_saveForm') {  // 保存表单
        this.saveForm()
      }else if (btn.funCode === 'form_return') {  // 返回
        this.handleClose()
      }else if (btn.funCode === 'form_startFlow') {  // 启动流程
        this.showModule = true
        this.moduleType = 'startFlow'
      }
    },
    closeModule() {
      this.showModule = false
    },
    chooseOk: function (item) {
      /*
        item中属性
          category  definitionId  deploymentId  deploymentTime  processKey  processName
       */
      console.log("item", item)
      this.flowForm = this.formInfo
      this.flowForm.flowid = item.processKey
      this.flowForm.ywlx = item.category
      this.flowForm.ywname = item.processName
      this.$emit('editData', this.flowForm)
      this.closeModule() //关闭弹窗
      this.saveForm()  // 保存表单
      // 启动流程
      startProcess(item.definitionId, this.formInfo).then(res => {
        console.log("启动流程", res)
      })
    }
  }
}
</script>

<style scoped>
  .form-button {
    width: 100%;
    height: 50px;
  }
</style>
